<template>
  <div class="panel">
    <div class="table-container">
      <table class="growth-table">
        <thead>
          <tr>
            <th>排名</th>
            <th>区域</th>
            <th>作物</th>
            <th>长势评分</th>
            <th>生长周期</th>
            <th>状态</th>
          </tr>
        </thead>
        <tbody ref="tbodyRef" @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave">
          <tr v-for="(item, index) in displayData" :key="index">
            <td>
              <span class="rank" :class="getRankClass((index % growthData.length) + 1)">{{ (index % growthData.length) + 1 }}</span>
            </td>
            <td>{{ item.area }}</td>
            <td>{{ item.crop }}</td>
            <td>
              <div class="score-container">
                <span class="score">{{ item.score }}</span>
                <div class="progress-bar">
                  <div class="progress" :style="{ width: item.score + '%' }"></div>
                </div>
              </div>
            </td>
            <td>{{ item.cycle }}</td>
            <td>
              <span class="status" :class="item.status">{{ item.statusText }}</span>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'

const tbodyRef = ref<HTMLElement | null>(null)
let scrollInterval: number | null = null

// 模拟数据
const growthData = ref([
  { area: 'A区', crop: '水稻', score: 95, cycle: '抽穗期', status: 'excellent', statusText: '优' },
  { area: 'B区', crop: '小麦', score: 88, cycle: '拔节期', status: 'good', statusText: '良' },
  { area: 'C区', crop: '玉米', score: 82, cycle: '抽雄期', status: 'good', statusText: '良' },
  { area: 'D区', crop: '大豆', score: 75, cycle: '开花期', status: 'normal', statusText: '中' },
  { area: 'E区', crop: '水稻', score: 68, cycle: '分蘖期', status: 'normal', statusText: '中' },
  { area: 'F区', crop: '小麦', score: 60, cycle: '返青期', status: 'normal', statusText: '中' },
  { area: 'G区', crop: '玉米', score: 55, cycle: '苗期', status: 'poor', statusText: '差' },
  { area: 'H区', crop: '大豆', score: 45, cycle: '苗期', status: 'poor', statusText: '差' },
  { area: 'I区', crop: '水稻', score: 40, cycle: '苗期', status: 'poor', statusText: '差' },
  { area: 'J区', crop: '小麦', score: 35, cycle: '苗期', status: 'poor', statusText: '差' }
])

// 复制数据以实现无限循环
const displayData = ref([...growthData.value, ...growthData.value])

// 获取排名样式类
const getRankClass = (rank: number) => {
  if (rank <= 3) return `rank-${rank}`
  return ''
}

// 开始自动滚动
const startAutoScroll = () => {
  if (!tbodyRef.value) return
  
  let scrollTop = 0
  const rowHeight = 40 // 每行高度
  const totalHeight = rowHeight * growthData.value.length
  const visibleHeight = 200 // 可见区域高度
  
  scrollInterval = window.setInterval(() => {
    scrollTop += 1
    if (scrollTop >= totalHeight) {
      scrollTop = 0
    }
    tbodyRef.value!.scrollTop = scrollTop
  }, 24) // 每24ms滚动1px
}

// 添加鼠标悬停暂停功能
const handleMouseEnter = () => {
  if (scrollInterval) {
    clearInterval(scrollInterval)
    scrollInterval = null
  }
}

const handleMouseLeave = () => {
  if (!scrollInterval) {
    startAutoScroll()
  }
}

onMounted(() => {
  startAutoScroll()
})

onUnmounted(() => {
  if (scrollInterval) {
    clearInterval(scrollInterval)
  }
})
</script>

<style scoped>
.panel {
  height: 100%;
  width: 100%;
  position: relative;
  background: rgba(18, 161, 127, 0.1);
  border-radius: 4px;
  overflow: hidden;
}

.table-container {
  height: 100%;
  overflow: hidden;
  position: relative;
}

.growth-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  table-layout: fixed;
}

.growth-table thead {
  position: sticky;
  top: 0;
  z-index: 1;
  background: rgba(18, 161, 127, 0.2);
  display: table;
  width: 100%;
}

.growth-table th {
  padding: 10px;
  text-align: left;
  color: #33ffd0;
  font-weight: normal;
  border-bottom: 1px solid rgba(51, 255, 208, 0.3);
}

.growth-table th:nth-child(1),
.growth-table td:nth-child(1) {
  width: 60px;  /* 排名列 */
  text-align: center;
}

.growth-table th:nth-child(2),
.growth-table td:nth-child(2) {
  width: 70px;  /* 区域列 */
}

.growth-table th:nth-child(3),
.growth-table td:nth-child(3) {
  width: 70px;  /* 作物列 */
}

.growth-table th:nth-child(4),
.growth-table td:nth-child(4) {
  width: 140px;  /* 长势评分列 */
}

.growth-table th:nth-child(5),
.growth-table td:nth-child(5) {
  width: 90px;  /* 生长周期列 */
}

.growth-table th:nth-child(6),
.growth-table td:nth-child(6) {
  width: 70px;  /* 状态列 */
  text-align: center;
}

.growth-table tbody {
  display: block;
  height: 240px; /* 固定可见区域高度 */
  overflow: hidden;
  position: relative;
}

.growth-table tbody tr {
  display: table;
  width: 100%;
  height: 48px;
  position: relative;
}

.growth-table tbody tr:hover {
  background: rgba(51, 255, 208, 0.1);
}

.growth-table td {
  padding: 10px;
  color: #fff;
  border-bottom: 1px solid rgba(51, 255, 208, 0.1);
}

.rank {
  display: inline-block;
  width: 24px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  border-radius: 4px;
  background: rgba(51, 255, 208, 0.2);
  color: #33ffd0;
}

.rank-1 {
  background: #ff6b6b;
  color: #fff;
}

.rank-2 {
  background: #ffa502;
  color: #fff;
}

.rank-3 {
  background: #4ecdc4;
  color: #fff;
}

.score-container {
  display: flex;
  align-items: center;
  gap: 10px;
}

.score {
  min-width: 36px;
  color: #33ffd0;
}

.progress-bar {
  flex: 1;
  height: 8px;
  background: rgba(51, 255, 208, 0.1);
  border-radius: 4px;
  overflow: hidden;
}

.progress {
  height: 100%;
  background: #33ffd0;
  border-radius: 4px;
  transition: width 0.3s ease;
}

.status {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 4px;
  font-size: 13px;
}

.status.excellent {
  background: rgba(103, 194, 58, 0.2);
  color: #67c23a;
}

.status.good {
  background: rgba(230, 162, 60, 0.2);
  color: #e6a23c;
}

.status.normal {
  background: rgba(144, 147, 153, 0.2);
  color: #909399;
}

.status.poor {
  background: rgba(245, 108, 108, 0.2);
  color: #f56c6c;
}

/* 自定义滚动条样式 */
.growth-table tbody::-webkit-scrollbar {
  width: 4px;
}

.growth-table tbody::-webkit-scrollbar-track {
  background: rgba(51, 255, 208, 0.1);
  border-radius: 2px;
}

.growth-table tbody::-webkit-scrollbar-thumb {
  background: rgba(51, 255, 208, 0.3);
  border-radius: 2px;
}

.growth-table tbody::-webkit-scrollbar-thumb:hover {
  background: rgba(51, 255, 208, 0.5);
}
</style> 